<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Almond.CSS Demo</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="author" content="Alvaro Montoro (alvaromontoro@gmail.com)" />
    <meta name="keywords" content="AlMonD.CSS,demo,classless,styles" />
    <meta name="description" content="Demo page for AlMonD.CSS" />

    <link rel="stylesheet" href="../../dist/almond.css" />
    <link rel="stylesheet" href="./static/demo.css" />
  </head>
  <body>
    <header>
      <h1>Almond.CSS</h1>
      <p>Almond.CSS is a collection of CSS styles to make simple websites look nicer and better.</p>
      <p>
        On this demo page, we will go through the main components from this lightweight CSS library.
        Then we will also add the extended classed styles.
      </p>
    </header>
    <main>
      <section class="section">
        <h2>Typography</h2>
        <section class="section">
          <h3>Block and Inline Elements</h3>
          <p>
            Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat
            velit lorem, feugiat congue lacus laoreet quis. Praesent maximus ex nec justo iaculis,
            in euismod eros dictum. Cras ac lorem sit amet purus malesuada blandit. Mauris gravida
            augue non urna sodales porttitor. Etiam ullamcorper luctus ullamcorper. In lobortis
            consequat ante.
          </p>
          <p>
            This is a paragraph with multiple inline elements. The <span>span</span> is not styled,
            but you may have <a href="#">some links with the a tag</a>; also you can
            <em>add emphasis with em</em> or <i>also with i</i>; Highlight the words by
            <strong>using strong</strong> or just <b>bring attention with the b tag</b>; of course, 
            you can <s>strikethrough text</s> (or the deprecated tag in HTML5
            <strike>strike</strike>), and the <code>&lt;u&gt;</code> tag now stands for
            <u>unarticullated-text</u> instead of underline; abbreviations are great, as you may have
            <abbr title="too many abbreviations">TMA</abbr>; <code>inline code</code> is cool too;
            You can also add line breask with br...<br />
            <mark>Highlight text with mark</mark> or display a <kbd>Key</kbd>. You can also have
            <q>inline quotes with q</q>, or <samp>results from an operation with samp</samp> or a
            <var>variable</var>, or an <output>output</output>, also there's <small>small text</small>, text
            with<sup>superscript</sup>, or text with<sub>subscript</sub>... not to mention you can
            have time too. For example, this paragraph was originally written in <time>2020</time>.
            Not to forget about <dfn>definitions</dfn>! Also <del>del was deleted</del> and 
            <ins>ins was inserted</ins>.
          </p>
          <blockquote>
            <p>
              Integer viverra elit sed tincidunt dignissim. Donec luctus malesuada posuere. Sed
              pulvinar pulvinar augue. Aenean id ligula justo. Curabitur egestas sed augue vel
              vulputate. Ut tempor sem sit amet diam molestie, id tincidunt lorem vulputate. Duis eu
              consectetur turpis, sit amet lobortis magna.
            </p>
            <footer>—Cicero, <cite>De finibus bonorum et malorum</cite></footer>
          </blockquote>
          <address>
            <a href="https://alvaromontoro.com">Alvaro Montoro</a> wrote this document.
          </address>
          <h4>Fancy links</h4>
          <p>Some links may be special depending on their href or their rel:</p>
          <p>
            <a href="mailto:alvaromontoro@gmail.com">Link to alvaromontoro@gmail.com</a><br />
            <a href="tel:fakenumber">Link to a number (call)</a><br />
            <a href="sms:fakenumber">Link to a number (message)</a><br />
            <a href="file:index.html">Link to a file</a><br />
            <a href="file:index.html" download>Link to download a file</a><br />
            <a rel="external" href="#">Link to an external site</a><br />
            <a rel="bookmark" href="#">Link to bookmark</a>
          </p>
          <p>
            Those special links will work inline too!
            <a href="mailto:alvaromontoro@gmail.com">Email me!</a> or see an
            <a rel="external" href="https://alvaromontoro.com">Link to an external site</a>.
          </p>
        </section>
        <section>
          <h3>Headings</h3>
          <h1>Heading Level 1</h1>
          <h2>Heading Level 2</h2>
          <h3>Heading Level 3</h3>
          <h4>Heading Level 4</h4>
          <h5>Heading Level 5</h5>
          <h6>Heading Level 6</h6>
          <hgroup>
            <h2>Heading level 2 within hgroup</h2>
            <h3>Heading level 3 within hgroup</h3>
          </hgroup>
        </section>
      </section>

      <section class="section">
        <h2>Lists</h2>
        <ul>
          <li>Unordered list item 1</li>
          <li>
            Unordered list item 2
            <ul>
              <li>Unordered list sub-item 1</li>
              <li>Unordered list sub-item 2</li>
            </ul>
          </li>
          <li>Unordered list item 3</li>
          <li>Unordered list item 4</li>
        </ul>
        <ol>
          <li>Ordered list item 1</li>
          <li>
            Ordered list item 2
            <ol>
              <li>Ordered list sub-item 1</li>
              <li>Ordered list sub-item 2</li>
            </ol>
          </li>
          <li>Ordered list item 3</li>
          <li>Ordered list item 4</li>
        </ol>
      </section>

      <section class="section">
        <h2>Form &amp; Controls</h2>
        <section class="section">
          <h3>Inputs &amp; Textareas</h3>
          <form class="flex">
            <p>
              <label for="input">Input without type (defaults to text)</label><br />
              <input id="input" placeholder="Input" />
            </p>
            <p>
              <label for="input-text">Input with type="text"</label><br />
              <input type="text" id="input-text" />
            </p>
            <p>
              <label for="input-date">Input with type="date"</label><br />
              <input type="date" id="input-date" />
            </p>
            <p>
              <label for="input-datetime-local">Input with type="datetime-local"</label><br />
              <input type="datetime-local" id="input-datetime-local" />
            </p>
            <p>
              <label for="input-email">Input with type="email"</label><br />
              <input type="email" id="input-email" />
            </p>
            <p>
              <span>Input with type="hidden" ;)</span><br />
              <input id="hidden" type="hidden" />
            </p>
            <p>
              <label for="input-month">Input with type="month"</label><br />
              <input type="month" id="input-month" />
            </p>
            <p>
              <label for="input-number">Input with type="number"</label><br />
              <input type="number" id="input-number" />
            </p>
            <p>
              <label for="input-password">Input with type="password"</label><br />
              <input type="password" id="input-password" />
            </p>
            <p>
              <label for="input-search">Input with type="search"</label><br />
              <input type="search" id="input-search" />
            </p>
            <p>
              <label for="input-tel">Input with type="tel"</label><br />
              <input type="tel" id="input-tel" />
            </p>
            <p>
              <label for="input-time">Input with type="time"</label><br />
              <input type="time" id="input-time" />
            </p>
            <p>
              <label for="input-url">Input with type="url"</label><br />
              <input type="url" id="input-url" />
            </p>
            <p>
              <label for="input-week">Input with type="week"</label><br />
              <input type="week" id="input-week" />
            </p>
            <!-- <p>
              <label for="input-datetime">Input with type="datetime" (obsolete)</label><br />
              <input type="datetime" id="input-datetime" />
            </p> -->
            <p>
              <label for="textarea">Textarea</label><br />
              <textarea id="textarea"></textarea>
            </p>
          </form>
          <h4>Input States</h4>
          <form class="flex">
            <p>
              <label for="input-text-standard">Standard</label><br />
              <input type="text" id="input-text-standard" />
            </p>
            <p>
              <label for="input-text-disabled">Disabled</label><br />
              <input type="text" id="input-text-disabled" disabled />
            </p>
            <p>
              <label for="input-text-invalid">Invalid</label><br />
              <input type="text" id="input-text-invalid" required value="" />
            </p>
            <p>
              <label for="input-text-readonly">Read Only</label><br />
              <input type="text" id="input-text-readonly" readonly />
            </p>
          </form>
        </section>
        <section class="section">
          <h3>Buttons</h3>
          <div>
            <p>
              <span>Button with button tag</span><br />
              <button>Button</button>
            </p>
            <p>
              <span>Disabled button</span><br />
              <button disabled>Button</button>
            </p>
            <p>
              <label for="input-button">Input type="button"</label><br />
              <input type="button" id="input-button" value="Input with type button" />
              <input type="button" id="input-button-disabled" value="Input with type button" disabled />
            </p>
            <p>
              <label for="input-reset">Input type="reset"</label><br />
              <input type="reset" id="input-reset" value="Reset" />
            </p>
            <p>
              <label for="input-reset-disabled">Input type="reset"</label><br />
              <input type="reset" id="input-reset-disabled" value="Reset" disabled />
            </p>
            <p>
              <label for="input-submit">Input type="submit"</label><br />
              <input type="submit" id="input-submit" value="Submit" />
              <input type="submit" id="input-submit-disabled" value="Reset" disabled />
            </p>
            <p>
              <label for="input-image">Input type="image"</label><br />
              <input type="image" id="input-image" alt="Input" src="./static/input-image.png" />
            </p>
          </div>
        </section>
        <section class="section">
          <h3>Radios &amp; Checkboxes</h3>
          <p>
            <input type="radio" name="radio" id="radio-1" checked />
            <label for="radio-1">Radio 1</label><br />
            <input type="radio" name="radio" id="radio-2" />
            <label for="radio-2">Radio 2</label><br />
            <input type="radio" name="radio" id="radio-3" />
            <label for="radio-3">Radio 3</label><br />
            <input type="radio" name="radio" id="radio-4" disabled />
            <label for="radio-4">Radio 4 (disabled)</label>
          </p>
          <p>
            <input type="checkbox" id="checkbox-1" /> <label for="checkbox-1">Checkbox</label><br />
            <input type="checkbox" id="checkbox-2" checked />
            <label for="checkbox-2">Checked Checkbox</label><br />
            <input type="checkbox" id="checkbox-3" disabled />
            <label for="checkbox-3">Disabled Checkbox</label>
          </p>
        </section>
        <fieldset>
          <legend>Other Form Controls</legend>
          <p>
            <label for="select">Select</label><br />
            <select id="select">
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
              <option value="3">Option 3</option>
              <optgroup label="Subgroup">
                <option value="4">Option 4</option>
                <option value="5">Option 5</option>
              </optgroup>
            </select>

            <select id="select2" disabled>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
            </select>

            <select id="select3" required>
              <option value="">Test</option>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
            </select>
          </p>
          <p>
            <label for="selectmultiple">Multiselect</label><br />
            <select id="selectmultiple" multiple>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
              <option value="3">Option 3</option>
              <option value="4">Option 4</option>
              <option value="5">Option 5</option>
              <option value="6">Option 6</option>
              <optgroup label="Subgroup">
                <option value="7">Option 7</option>
                <option value="8">Option 8</option>
              </optgroup>
            </select>
          </p>
          <p>
            <label for="input-range">Input Range</label><br />
            <input type="range" id="input-range" />
          </p>
          <p>
            <label for="input-color">Input Color</label><br />
            <input type="color" id="input-color" />
          </p>
          <p>
            <label for="input-file">Input File</label><br />
            <input type="file" id="input-file" />
          </p>
        </fieldset>
        <section class="section">
          <h3>Elements in-line</h3>
          <p>
            <input type="text" aria-label="Test input" />
            <input type="button" value="Button" aria-label="Test button" />
          </p>

          <p>
            <input type="text" aria-label="Test input" />
            <select>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
              <option value="3">Option 3</option>
              <option value="4">Option 4</option>
            </select>
            <input type="button" value="Button" aria-label="Test button" />
          </p>

          <p>
            <select>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
              <option value="3">Option 3</option>
              <option value="4">Option 4</option>
            </select>
            <input type="button" value="Button" aria-label="Test button" />
          </p>
        </section>
      </section>

      <section class="section">
        <h2>Other HTML Elements</h2>
        <section class="section">
          <h3>Table</h3>
          <table>
            <caption>
              Demo Table
            </caption>
            <thead>
              <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Row 1 Value 1</td>
                <td>Row 1 Value 2</td>
                <td>Row 1 Value 3</td>
                <td>Row 1 Value 4</td>
              </tr>
              <tr>
                <td>Row 2 Value 1</td>
                <td>Row 2 Value 2</td>
                <td>Row 2 Value 3</td>
                <td>Row 2 Value 4</td>
              </tr>
              <tr>
                <td>Row 3 Value 1</td>
                <td>Row 3 Value 2</td>
                <td>Row 3 Value 3</td>
                <td>Row 3 Value 4</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <th>Total 1</th>
                <th>Total 2</th>
                <th>Total 3</th>
                <th>Total 4</th>
              </tr>
            </tfoot>
          </table>
        </section>
        <section class="section">
          <h3>Horizontal Rule</h3>
          <hr />
        </section>
        <section class="section">
          <h3>Images</h3>
          <h4>Img</h4>
          <img src="./static/person.png" alt="Cartoon" />
          <h4>Figure &amp; Figcaption</h4>
          <figure>
            <img src="./static/person.png" alt="Cartoon" />
            <figcaption>Picture of a person</figcaption>
          </figure>
          <h4>SVG</h4>
          <svg width="200" height="200" viewBox="0 0 100 100">
            <path d="M0,0 100,100 M100,0 0,100" stroke="blue" stroke-width="5" fill="none" />
            <circle cx="50" cy="50" r="30" stroke="red" stroke-width="5" fill="none" />
          </svg>
        </section>
        <section>
          <h3>Details</h3>
          <details>
            <summary>Details/Summary example</summary>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat velit
              lorem, feugiat congue lacus laoreet quis. Praesent maximus ex nec justo iaculis, in
              euismod eros dictum. Cras ac lorem sit amet purus malesuada blandit. Mauris gravida
              augue non urna sodales porttitor. Etiam ullamcorper luctus ullamcorper. In lobortis
              consequat ante.
            </p>
          </details>

          <section>
            <h4>Stacked details ("Accordion style")</h4>

            <details>
              <summary>Accordion 1</summary>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              </p>
            </details>
            <details>
              <summary>Accordion 2</summary>
              <p>
                Praesent placerat velit lorem, feugiat congue lacus laoreet quis.
              </p>
            </details>
            <details>
              <summary>Accordion 3</summary>
              <p>
                Praesent maximus ex nec justo iaculis, in euismod eros dictum.
              </p>
            </details>
          </section>
        </section>
        <section>
          <h3>Dialog</h3>
          <dialog id="dialog-1">
            <div>This is a test dialog</div>
            <div>
              <button onclick="document.querySelector('#dialog-1').removeAttribute('open');">Close Dialog</button>
            </div>
          </dialog>
          <dialog id="dialog-2">
            <h2>Dialog with heading</h2>
            <div>This is a test dialog</div>
            <div>
              <button onclick="document.querySelector('#dialog-2').removeAttribute('open');">Close Dialog</button>
            </div>
          </dialog>
          <dialog id="dialog-3">
            <div>
              <p>This is a test dialog with a long text.</p>
              <p>This is a test dialog with a long text.</p>
              <p>This is a test dialog with a long text.</p>
              <p>This is a test dialog with a long text.</p>
              <p>This is a test dialog with a long text.</p>
              <p>This is a test dialog with a long text.</p>
              <p>This is a test dialog with a long text.</p>
              <p>This is a test dialog with a long text.</p>
              <p>This is a test dialog with a long text.</p>
              <p>This is a test dialog with a long text.</p>
              <p>This is a test dialog with a long text.</p>
              <p>This is a test dialog with a long text.</p>
              <p>This is a test dialog with a long text.</p>
              <p>This is a test dialog with a long text.</p>
              <p>This is a test dialog with a long text.</p>
              <p>This is a test dialog with a long text.</p>
              <p>This is a test dialog with a long text.</p>
              <p>This is a test dialog with a long text.</p>
              <p>This is a test dialog with a long text.</p>
            </div>
            <button onclick="document.querySelector('#dialog-3').removeAttribute('open');">Close Dialog</button>
          </dialog>
          <button onclick="document.querySelector('#dialog-1').setAttribute('open', '');">Open Dialog</button>
          <button onclick="document.querySelector('#dialog-2').setAttribute('open', '');">Open Dialog with Heading</button>
          <button onclick="document.querySelector('#dialog-3').setAttribute('open', '');">Open Dialog with Long Text</button>
        </section>
        <section>
          <h3>Progress</h3>
          <progress> 70% </progress><br />
          <progress max="100" value="70"> 70% </progress>
        </section>
        <section>
          <h3>Definition Lists</h3>
          <dl>
            <dt>Term 1</dt>
            <dd>Definition for term 1.</dd>

            <dt>Term 2</dt>
            <dd>Definition for term 2.</dd>

            <dt>Term 3</dt>
            <dd>Definition for term 3.</dd>
          </dl>
        </section>
        <section>
          <h3>Pre</h3>
          <pre>
This is a test
            using
pre
    with different 
  indentations
          </pre>
          <h4>Pre with Code</h4>
          <pre><code>#include &lt;stdio.h&gt;

// this is a line with really long text to show that now the gray background goes all the way, instead of limiting to the wisth of the main.
int main(void) {
  printf("Hello World");
  return 0;
}
</code></pre>
        </section>

        <section>
          <h3>Multimedia</h3>
          <section>
            <h4>Audio</h4>
            <p>Audio credit: "Notification Sound" by SoundsForYou on <a href="https://pixabay.com/sound-effects/notifications-sound-127856/" rel="nofollow noreferrer">Pixabay</a></p>
            <audio src="../static/notifications-sound-127856.mp3" controls muted></audio>
            <audio src="../static/notifications-sound-127856.mp3" muted></audio>
          </section>
          <section>
            <h4>Video</h4>
            <p>Video credit: "Hearbeat" by conolan on <a href="https://pixabay.com/videos/heart-heartbeat-slow-heart-8449/" rel="nofollow noreferrer">Pixabay</a></p>
            <video width="640" height="360" src="../static/Heart%20-%208449.mp4" controls></video>
          </section>
        </section>
      </section>

      <section>
        <h2>Widgets</h2>
        <p>
          An accessible collection of class-less widgets, based on attributes and roles. <b>Widgets are 
          not available in the lite version of the library</b>.
        </p>
        <section>
          <h3>Progress bar</h3>
          <p>
            To create a circular progress bar, add <code>role="progressbar"</code> to an HTML element. Also, 
            inline add a CSS variable with the target value: <code>style="--value: 66"</code>.
          </p>
          <p>To make it more accessible, add some ARIA attributes:</p>
          <ul>
            <li><code>aria-valuenow</code>: The value of the progress bar.</li>
            <li><code>aria-valuemin</code>: The minimum value of the progress bar.</li>
            <li><code>aria-valuemax</code>: The maximum value of the progress bar.</li>
          </ul>
          <p>
            You can specify how the thickness of the progress bar by setting the <code>--thickness</code>
            custom property to one of these values: <code>var(--thick)</code>, <code>var(--medium)</code> (default),
            or <code>var(--thin)</code>.
          </p>

          <section>
            <h4>Code example and demos</h4>
            <pre><code>&lt;div role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="--value: 33"&gt;&lt;/div&gt;
&lt;div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="--value: 50; --thickness: var(--thick)"&gt;&lt;/div&gt;
&lt;div role="progressbar" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" style="--value: 66; --thickness: var(--medium)"&gt;&lt;/div&gt;
&lt;div role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="--value: 90; --thickness: var(--thin)"&gt;&lt;/div&gt;</code></pre>
            <div style="display:flex; gap: 2rem;">
              <div role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="--value: 33"></div>
              <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="--value: 50; --thickness: var(--thick)"></div>
              <div role="progressbar" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" style="--value: 66; --thickness: var(--medium)"></div>
              <div role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="--value: 90; --thickness: var(--thin)"></div>
            </div>
          </section>
        </section>
      </section>
    </main>
    <hr />
    <footer>
      2020 &copy; <a href="https://alvaromontoro.com">Alvaro Montoro</a>.
      <a href="https://github.com/alvaromontoro/almond.css">Project and contributions</a>.
    </footer>
  </body>
</html>
